<template>
	<view class="flex-col homepage">
		<view class="flex-row wrapper">
			<u-avatar :size="90" @click="avatar" :src="portrait"></u-avatar>
			<view class="flex-col flex-row wraper-col">
				<view class="u-line-1 text">{{user.userName}}</view>
				<view class="u-line-1 text-two">{{user.userPhone}}</view>
			</view>
		</view>
		<view class="flex-row wrapper-two">
			<view class="flex-col wraper-row">
				<view class="flex-row box" @click="regRecord">
					<view class="box-col">
						<uni-icons class="container" style="position: absolute;  top: 10px; right: 10rpx;"
							type="person-filled" size="40"></uni-icons>
					</view>
					<view class="u-line-1 text-three">预约挂号记录</view>
					<u-line class="line" color="#040202"></u-line>
				</view>
				<view class="flex-row box-two" @click="payment">
					<view class="box-col">
						<uni-icons class="container" style="position: absolute;  top: 10px; right: 10rpx;"
							type="person-filled" size="40"></uni-icons>
					</view>
					<view class="u-line-1 text-four">门诊缴费记录</view>
					<u-line class="line" color="#040202"></u-line>
				</view>
				<view class="flex-row box-three" @click="skype">
					<view class="box-col">
						<uni-icons class="container" style="position: absolute;  top: 10px; right: 10rpx;"
							type="person-filled" size="40"></uni-icons>
					</view>
					<view class="u-line-1 text-five">门诊充值记录</view>
					<u-line class="line" color="#040202"></u-line>
				</view>
				<view class="flex-row box-four" @click="hospitalPay">
					<view class="box-col">
						<uni-icons class="container" style="position: absolute;  top: 10px; right: 10rpx;"
							type="person-filled" size="40"></uni-icons>
					</view>
					<view class="u-line-1 text-six">住院充值记录</view>
					<u-line class="line" color="#040202"></u-line>
				</view>
				<view class="flex-col flex-row box-five">
					<view class="flex-row box-row" @click="nucleicRecord">
						<view class="container">
							<uni-icons class="container" style="position: absolute;  top: 10px;" type="person-filled"
								size="40"></uni-icons>
						</view>
						<view class="u-line-1 text-seven">核酸预约记录</view>
						<u-line class="line" color="#040202"></u-line>
					</view>
					<view class="flex-row box-row-two" @click="physicalRecord">
						<view class="container">
							<uni-icons class="container" style="position: absolute;  top: 10px;" type="person-filled"
								size="40"></uni-icons>
						</view>
						<view class="u-line-1 text-eight">体检预约记录</view>
						<u-line class="line" color="#040202"></u-line>
					</view>
				</view>
				<view class="flex-row box-six" @click="exit">
					<view class="box-col">
						<uni-icons class="container" style="position: absolute;  top: 10px; right: 10rpx;" type="help"
							size="40"></uni-icons>
					</view>
					<view class="u-line-1 text-nine">退出登录</view>
					<!-- <uni-icons type="person-filled" size="50"></uni-icons> -->
				</view>
			</view>
			<view class="flex-row wraper-row-two">
				<view class="flex-col box-seven" @click="patient">
					<view class="box-row-three">
						<uni-icons type="person" size="50"></uni-icons>
					</view>
					<view class="u-line-1 text-ten">就诊人管理</view>
				</view>
				<view class="flex-col box-eight" @click="hospital">
					<view class="box-row-four">
						<uni-icons type="person-filled" size="50"></uni-icons>
					</view>
					<view class="u-line-1 text-eleven">住院人管理</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				URL: 'http://localhost:9000/', //主域名
				user: [],
				portrait: '' ,//用户头像
				uploadFile:''
			}
		},
		methods: {
			
			//退出登录
			exit(){
				uni.switchTab({
					url:'../index/index'
				})
				uni.removeStorageSync("user")
			},
			
			//跳转体检记录页面
			physicalRecord(){
				uni.navigateTo({
					url: "physicalRecord?id=" + this.user.id
				})
			},
			//跳转核酸记录页面
			nucleicRecord(){
				uni.navigateTo({
					url: "nucleicRecord?id=" + this.user.id
				})
			},
			
		
			//跳转住院充值记录页面
			hospitalPay(){
				uni.navigateTo({
					url: "hospitalPay?id=" + this.user.id
				})
			},
			
			//跳转缴费记录页面
			payment(){
				uni.navigateTo({
					url: "paymentRecord?id=" + this.user.id
				})
			},
			
			//跳转充值记录页面
			skype(){
				uni.navigateTo({
					url: "patientSkype?id=" + this.user.id
				})
			},
			
		
			//跳转挂号记录页面
			regRecord(){
				uni.navigateTo({
					url: "regRecord?id=" + this.user.id
				})
			},

			//跳转就诊人管理页面
			patient() {
				uni.navigateTo({
					url: "patient?id=" + this.user.id
				})
			},
			//跳转住院人管理页面
			hospital() {
				uni.navigateTo({
					url: "hospital?id=" + this.user.id,
				})
			},

			//修改用户头像
			avatar() {
				console.log(this.user.id)
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.portrait = res.tempFilePaths[0]
						console.log(this.portrait)
						uni.uploadFile({
							url:this.URL+"user/user/user/uploadFile/"+this.user.id,
							filePath: this.portrait,
							name: 'file',
							formData: {
								'user': "test"
							},
							success: (uploadFileRes) => {
								this.uploadFile = JSON.parse(uploadFileRes.data)
								console.log(this.uploadFile.data.url);
								this.user.portrait = this.uploadFile.data.url
								// uni.removeStorageSync('user');
								uni.setStorageSync("user" , this.user)

							}
						});

					}
				})
			},

		},
		onShow() {
			const user = uni.getStorageSync("user")
			if (user == '') {
				uni.showToast({
					icon: 'none',
					title: '请先登录'
				})
				uni.navigateTo({
					url: "login"
				})
			} else {
				this.user = user
				this.portrait = user.portrait
				console.log(this.user)
			}
		}
	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {

		.wrapper {
			width: 750rpx;
			height: 330rpx;
			justify-content: space-between;
			padding: 45rpx 280rpx 0rpx 78rpx;
			background: #3478f7;

			.wraper-col {
				width: 208rpx;
				margin-top: 20rpx;

				.text {
					width: 100%;
					margin-bottom: 28rpx;
					font-size: 32rpx;
					color: #ffffff;
				}

				.text-two {
					width: 100%;
					font-size: 32rpx;
					color: #ffffff;
				}
			}
		}

		.wrapper-two {
			width: 750rpx;
			justify-content: center;
			padding: 182rpx 0rpx 100rpx 0rpx;
			background: #fdfeff;

			.wraper-row {
				width: 628rpx;
				border-width: 2rpx;
				border-style: solid;
				border-radius: 20rpx;

				.box {
					width: 628rpx;
					justify-content: space-between;
					margin-bottom: -2rpx;
					padding: 16rpx 272rpx 16rpx 50rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;

					.box-col {
						width: 92rpx;
						height: 82rpx;
					}

					.text-three {
						width: 188rpx;
						margin-top: 22rpx;
					}

					.line {
						bottom: 0rpx;
						left: 0rpx;
						position: absolute;
					}
				}

				.box-two {
					width: 628rpx;
					justify-content: space-between;
					padding: 16rpx 272rpx 16rpx 50rpx;

					.box-col {
						width: 92rpx;
						height: 82rpx;
					}

					.text-four {
						width: 188rpx;
						margin-top: 22rpx;
					}

					.line {
						bottom: 0rpx;
						left: 0rpx;
						position: absolute;
					}
				}

				.box-three {
					width: 622rpx;
					justify-content: space-between;
					padding: 16rpx 266rpx 16rpx 50rpx;

					.box-col {
						width: 92rpx;
						height: 82rpx;
					}

					.text-five {
						width: 188rpx;
						margin-top: 22rpx;
					}

					.line {
						bottom: 0rpx;
						left: 0rpx;
						position: absolute;
					}
				}

				.box-four {
					width: 622rpx;
					justify-content: space-between;
					padding: 16rpx 270rpx 16rpx 50rpx;

					.box-col {
						width: 92rpx;
						height: 82rpx;
					}

					.text-six {
						width: 188rpx;
						margin-top: 22rpx;
					}

					.line {
						bottom: 0rpx;
						left: 0rpx;
						position: absolute;
					}
				}

				.box-five {
					width: 622rpx;

					.box-row {
						width: 622rpx;
						justify-content: space-between;
						margin-bottom: -6rpx;
						padding: 16rpx 266rpx 16rpx 50rpx;

						.container {
							width: 92rpx;
							height: 82rpx;
						}

						.text-seven {
							width: 188rpx;
							margin-top: 22rpx;
						}

						.line {
							bottom: 0rpx;
							left: 0rpx;
							position: absolute;
						}
					}

					.box-row-two {
						width: 622rpx;
						justify-content: space-between;
						padding: 16rpx 266rpx 16rpx 50rpx;

						.container {
							width: 92rpx;
							height: 82rpx;
						}

						.text-eight {
							width: 188rpx;
							margin-top: 22rpx;
						}

						.line {
							bottom: 0rpx;
							left: 0rpx;
							position: absolute;
						}
					}
				}

				.box-six {
					width: 622rpx;
					justify-content: space-between;
					padding: 16rpx 268rpx 16rpx 50rpx;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					.box-col {
						width: 92rpx;
						height: 82rpx;
					}

					.text-nine {
						width: 188rpx;
						margin-top: 22rpx;
					}
				}
			}

			.wraper-row-two {
				width: 628rpx;
				justify-content: space-between;
				padding: 27rpx 50rpx;
				border-width: 2rpx;
				border-style: solid;
				border-radius: 20rpx;
				top: -84rpx;
				left: 60rpx;
				background: #ffffff;
				position: absolute;

				.box-seven {
					width: 210rpx;
					padding: 30rpx 30rpx 12rpx 30rpx;

					.box-row-three {
						width: 100rpx;
						height: 94rpx;
						margin-right: auto;
						margin-bottom: 12rpx;
						margin-left: auto;
					}

					.text-ten {
						width: 100%;
					}
				}

				.box-eight {
					width: 210rpx;
					padding: 30rpx 30rpx 12rpx 30rpx;

					.box-row-four {
						width: 100rpx;
						height: 94rpx;
						margin-right: auto;
						margin-bottom: 12rpx;
						margin-left: auto;
					}

					.text-eleven {
						width: 100%;
					}
				}
			}
		}
	}
</style>
